<template>
    <div class="forexcrt-item" v-bind:class="[levelClass]" @click="clickItem">{{content}}</div>
</template>

<script>
export default {
    props: ['forex', 'index', 'content', 'level'],
    name: 'Item',
    data() {
        return {
            levelClass: ''
        }
    },
    created() {
        console.log(this.level);
        this.levelClass = 'forexcrt-level-'+this.level;
    },
    methods:{
        clickItem () {
            console.log(111);
        }
    }
}
</script>
<style >
.forexcrt-item{
    width: 100px;
    height: 25px;
    border: 1px solid #eeeeee;
    display: inline-block;
}

.forexcrt-level-1 {
    background-color: #f99a96;
}
.forexcrt-level-2 {
    background-color: #fcc9c7;
}
.forexcrt-level-3 {
    background-color: #ffffff;
}
.forexcrt-level-4 {
    background-color: #b2f1ad;
}
.forexcrt-level-5 {
    background-color: #83d97c;
}
</style>